<template>
    <el-form :inline="true" :model="page" class="demo-form-inline">
        <el-form-item label="关键字">
            <el-input v-model="page.keyword" placeholder="关键字" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
    </el-form>
    <el-row>
        <el-button type="primary"  @click="handleClick" >新增</el-button>
        <el-button type="danger"  @click="handleClick">删除</el-button>
    </el-row>
    <!-- 表格数据 -->
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection"/>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="编码"  />
        <el-table-column label="操作" width="200">
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleClick">编辑</el-button>
                <el-button type="danger" size="small" @click="onDelete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="sizes, prev, pager, next, total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    
    />
</template>
  
<script setup>
import { ref,onMounted} from 'vue'
import roleApi from '../../api/role.js' 

// 记录总条数
let total = ref(0)
let page =ref({
    currentPage:1,
    pageSize:10,
    keyword:""
})

// 查询按钮事件
const onSearch = () => {
    roleApi.selectRoleList(page.value).then((res) => {
        // console.log(res);
        total.value = res.count
        tableData.value = res.data
    });
}
//删除按钮事件
const onDelete = (id)=>{
    console.log(id)

}

// 表格数据
const tableData = ref([
    
])
//组件挂载完成后，自动执行钩子函数
onMounted(()=>{
    onSearch()
})
</script>
  
<style long="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}
.el-pagination{
    margin-top: 20px;
}
.el-row{
    margin-bottom: 20px;
}
</style>
